<template>
  <div class="users">
    <!-- 面包屑组件 separator:分隔符 -->
    <el-breadcrumb separator="/">
      <!-- to: 路由跳转对象，同 vue-router 的 to -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- input输入框组件 -->
    <el-input placeholder="请输入用户名" v-model="searchVal" class="input-with-select">
      <!-- 查询按钮绑定点击事件 -->
      <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
    </el-input>
    <!-- 按钮组件  : 添加用户按钮绑定事件，显示对话框 -->
     <el-button type="primary" plain @click="handleAddUser">添加用户</el-button>

     <!-- Table表格组件 : 按需求更改表格字段名  -->
     <!--
       data : 显示的数据，array
       prop : 对应列内容的字段名
      -->
      <el-table
      v-loading="loading"
    :data="userList"
    border
    style="width: 100%"
    class="mt-15">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话">
    </el-table-column>
    <el-table-column
      prop="address"
      label="状态">
      <template slot-scope="scope">
          <!-- 通过scope.row分别将每个对象中的状态字段取出来 -->
          <el-switch
            v-model="scope.row.mg_state"
            @change="handleChangeState(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
    </el-table-column>
    <el-table-column
        prop="address"
        label="操作">
        <!-- 表格直接渲染数据不需要使用作用域插槽，如果在表格里面需要放标签或者其他组件的时候，就需要使用作用域插槽 -->
         <template slot-scope="scope">
           <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
           <!-- 通过scope对象的row属性，可以拿到点击的那一行的表格数据对象 -->
           <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
           <el-button type="warning" icon="el-icon-check" circle @click="assignRole(scope.row)"></el-button>
         </template>
      </el-table-column>
   </el-table>

   <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPages"
      class="mt-15">
    </el-pagination>

   <!-- 添加用户对话框 -->
   <!--
     before-close  关闭前的回调，会暂停 Dialog 的关闭
           仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效
   -->
   <el-dialog title="添加用户" :visible.sync="addDialogFormVisible" :before-close="handleClose">
      <!-- 3.5 给表单添加ref，主要用来js校验 -->
      <el-form :model="addForm" :rules="myrules" ref="addRef">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="addForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="addForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="addForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="addForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>

   <!-- 编辑用户对话框 -->
   <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible"
   :before-close="closeEdit">
      <!-- 3.5 给表单添加ref，主要用来js校验 -->
      <el-form :model="editForm" :rules="myrules" ref="editRef">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <!-- :disabled="true" 禁用 -->
          <el-input v-model="editForm.username" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="editForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配角色对话框 -->
   <el-dialog title="分配角色" :visible.sync="assignDialogFormVisible">
      <!-- 3.5 给表单添加ref，主要用来js校验 -->
      <el-form :model="assignForm" ref="assignRef">
        <el-form-item label="当前用户" :label-width="formLabelWidth">
          <!-- :disabled="true" 禁用 -->
          <el-input v-model="assignForm.username" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <!-- 使用Select选择器组件 -->
          <el-select v-model="selectRid" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancelAssign">取 消</el-button>
        <el-button type="primary" @click="confirmAssign">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 引进相关处理请求封装函数
import { getUserList, addUser, editUser, modifyUserStyle, deleteUser, getRoles, assignRoles } from '@/api/handleUrl'

export default {
  data () {
    return {
      // 开启加载效果
      loading: true,
      // 添加用户的表单验证
      myrules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur,change'] }
        ],
        mobile: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ]
      },
      // 用户搜索框数据
      searchVal: '',
      /* 请求用户数据列表需发送的数据 */
      // 查询参数 -- 可为空
      query: '',
      // 当前页码 --  默认为首页
      pagenum: 1,
      // 每页显示条数 -- 默认为10条
      pagesize: 2,
      /* ***** */
      // 用户总记录数
      totalPages: 0,

      // 用户信息列表数据
      userList: [],
      // 设置添加用户表单的显示模式(默认隐藏)
      addDialogFormVisible: false,
      // 设置编辑用户表单的显示模式(默认隐藏)
      editDialogFormVisible: false,
      // 保存添加用户表单的数据
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 保存编辑用户表单数据
      editForm: {
        id: 1,
        username: '',
        email: '',
        mobile: ''
      },
      // 弹出会话框label属性的文字宽度
      formLabelWidth: '80px',
      /* **分配角色的数据** */
      assignForm: {
        id: '',
        username: ''
      },
      // 角色选择框的数据
      roleList: [],
      // 选中用户角色的id
      selectRid: '',
      // 设置编辑用户表单的显示模式(默认隐藏)
      assignDialogFormVisible: false
    }
  },
  created () {
    // 调用初始化表格数据方法
    this.initTable()
    // 成功获取数据后，关闭加载
    this.loading = false
  },
  methods: {
    /*  动态更新每页数据条数 */
    handleSizeChange (val) {
      // 重新设置每页的条数
      this.pagesize = val
      // 重新刷新用户数据列表
      this.initTable()
    },
    /* 动态更新当前页码 */
    handleCurrentChange (val) {
      // 重新设置当前页
      this.pagenum = val
      // 重新刷新用户数据列表
      this.initTable()
    },
    /* 初始化用户表格数据 */
    initTable () {
      // 调用封装好的发送请求方法
      getUserList({ query: this.searchVal, pagenum: this.pagenum, pagesize: this.pagesize })
        .then(res => {
          // 用户数据集合
          this.userList = res.data.users
          // 用户总记录数
          this.totalPages = res.data.total
        })
    },
    /* 查询用户数据 */
    handleSearch () {
      // 根据查询用户名关键字重新获取用户数据列表
      this.initTable()
    },
    /* 添加用户数据 */
    handleAddUser () {
      // 设置弹出添加用户表单
      this.addDialogFormVisible = true
    },
    /* 提交用户表单 */
    confirmAdd () {
      // js后台验证添加用户表单的数据
      this.$refs.addRef.validate(IsAdd => {
        if (!IsAdd) {
          // 验证有误 -- 弹框提示错误信息
          this.$message.error('请正确填写表单信息')
        } else {
          // 验证通过 -- 发送添加请求
          addUser(this.addForm)
            .then(res => {
              if (res.meta.status === 201) {
                // 弹出添加成功提示信息
                this.$message.success(res.meta.msg)
                // 隐藏添加用户表单框
                this.addDialogFormVisible = false
                // 清空表单
                this.addForm = []
                // 重新刷新用户数据列表
                this.initTable()
              } else {
                this.$message.error(res.meta.msg)
              }
            })
        }
      })
    },
    /* 点击关闭添加用户表单 */
    handleClose (done) {
      // 移除表单项的校验结果
      this.$refs.addRef.clearValidate()
      done()
    },
    /* 取消添加用户 -- 会有警告 */
    cancelAdd () {
      // 隐藏添加框
      this.addDialogFormVisible = false
      // 移除表单项的校验结果
      this.$refs.addRef.clearValidate()
      // 清空表单
      this.addForm = []
    },
    /* 编辑用户 */
    handleEdit (row) {
      // console.log(row)
      // 通过 传入的 scope.row 获取当前选中用户的信息，并填充到编辑表单中
      this.editForm.id = row.id
      this.editForm.username = row.username
      this.editForm.email = row.email
      this.editForm.mobile = row.mobile
      // 显示编辑用户对话框
      this.editDialogFormVisible = true
    },
    /* 确认编辑用户 */
    confirmEdit () {
      this.$refs.editRef.validate(IsEdit => {
        if (IsEdit) {
          editUser(this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })
            .then(res => {
              if (res.meta.status === 200) {
                // 隐藏编辑对话框
                this.editDialogFormVisible = false
                // 成功提示
                this.$message.success(res.meta.msg)
                // 重新加载用户数据表单
                this.initTable()
              } else {
                this.$message.error(res.meta.msg)
              }
            })
        } else {
          // 验证有误 -- 弹框提示错误信息
          this.$message.error('请正确填写表单信息,更新验证失败')
        }
      })
    },
    /* 取消编辑用户 */
    cancelEdit () {
      // 隐藏编辑用户对话框
      this.editDialogFormVisible = false
      // 移除表单项的校验结果
      this.$refs.editRef.clearValidate()
    },
    /* 关闭编辑用户 */
    closeEdit (done) {
      // 移除表单项的校验结果
      this.$refs.editRef.clearValidate()
      done()
    },
    /* 修改用户状态 */
    handleChangeState (row) {
      modifyUserStyle(row.id, row.mg_state)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
          } else {
            this.$message.error(res.meta.msg)
          }
        })
    },
    /* 删除用户 */
    handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(row.id)
          .then(res => {
            // 成功删除
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新刷新
            this.initTable()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /* 分配角色 */
    assignRole (row) {
      // console.log(row)
      // 弹出分配角色会话框
      this.assignDialogFormVisible = true
      // 设置显示用户名
      this.assignForm.username = row.username
      // 设置显示当前用户角色类型(将角色名汉字赋值给selectRid,为了刚开始显示)
      this.selectRid = row.role_name
      // 获取设置用户id
      this.assignForm.id = row.id

      // 渲染角色可选择类型
      getRoles().then(res => {
        if (res.meta.status === 200) {
          this.roleList = res.data
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    /* 确定更新用户分配角色 */
    confirmAssign () {
      // 判断selectRid是否为字符串类型,若是，按确定键则直接隐藏设置会话框，不发送请求
      if (typeof this.selectRid === 'string') {
        this.assignDialogFormVisible = false
        return false
      }

      // 发请求之前
      assignRoles(this.assignForm.id, this.selectRid)
        .then(res => {
          // console.log(res)
          if (res.meta.status === 200) {
            // 隐藏用户角色设置对话框
            this.assignDialogFormVisible = false
            // 成功提示
            this.$message.success(res.meta.msg)
            // 刷新表格数据
            this.initTable()
          } else {
            // 错误提示
            this.$message.error(res.meta.msg)
          }
        })
    },
    /* 取消更新用户分配角色 */
    cancelAssign () {
      this.assignDialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.input-with-select {
  width: 300px;
  margin-right: 15px;
}

.mt-15 {
  padding: 5px 0;
  background-color: #F5F5F5 ;
}
</style>
